<template>
    <div style="background-color: #F0F0F7">
        <el-row>
            <el-col class="block" style="width: 98%">
                <div class="top_total">
                    <div class="msg">
                        <span class="num">早安 {{this.user.username}}，相约在冬季，开始您一天的工作吧！</span>
                        <p class="weather"><i class="el-icon-s-promotion"></i>今日阴转小雨，22°C-25°C，出门记得带伞哦</p>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!--任务卡片-->
        <el-row :gutter="12" style="margin: 0px;padding-left: 7.5px;padding-right: 7.5px;">
            <el-col :span="6">
                <el-card shadow="hover" class="card">
                    <span class="">总销售额 </span>
                    <el-tooltip class="item" effect="dark" content="项目运行至今的所有销售额" placement="top">
                        <i class="el-icon-warning-outline infoicon"></i>
                    </el-tooltip>
                    <el-divider></el-divider>
                    <p class="bigfont">¥ {{saleCount[0]}}</p>
                    <p>周同比{{saleCount[3]}}<i :class="[saleCount[3]>0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom']" style="color: red"></i>日同比{{saleCount[2]}}<i :class="[saleCount[2]>0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom']" style="color: #5daf34"></i></p>
                    <el-divider></el-divider>
                    <span>日销售额 ￥{{saleCount[1]}}</span>
                </el-card>
            </el-col>

            <!--客流量预测-->
            <el-col :span="6">
                <el-card shadow="hover" class="card">
                    <span class="">客流量预测</span>
                    <el-tooltip class="item" effect="dark" content="Go+项目进度" placement="top">
                        <i class="el-icon-warning-outline infoicon"></i>
                    </el-tooltip>
                    <el-divider></el-divider>
                    <p><el-tag>日</el-tag> 客流量<span class="bigfont"> {{forecasts[0]}}</span></p>
                    <p><el-tag type="danger">月</el-tag> 客流量<span class="bigfont"> {{forecasts[1]}}</span></p>
                    <!--月客流量<p class="bigfont"> {{forecasts[1]}}</p>-->
                    <el-divider></el-divider>
                    <span>日销售额 ￥12,423</span>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card shadow="hover" class="card">
                    <span class="">支付笔数 </span>
                    <el-tooltip class="item" effect="dark" content="已支付的金额总额" placement="top">
                        <i class="el-icon-warning-outline infoicon"></i>
                    </el-tooltip>
                    <el-divider></el-divider>
                    <p class="bigfont">到账 {{payCount[0]}} 笔 <i class="el-icon-thumb"></i></p>
                    <p>周同比{{payCount[3]}}<i :class="[payCount[3]>0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom']" style="color: red"></i>日同比{{payCount[2]}}<i :class="[payCount[2]>0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom']" style="color: #5daf34"></i></p>
                    <el-divider></el-divider>
                    <span>日支付笔数 {{payCount[1]}}笔</span>
                </el-card>
            </el-col>

            <!--项目完成进度-->
            <el-col :span="6">
                <el-card shadow="hover" class="card">
                    <span class="">项目完成进度 </span>
                    <el-tooltip class="item" effect="dark" content="客户反馈结果" placement="top">
                        <i class="el-icon-warning-outline infoicon"></i>
                    </el-tooltip>
                    <el-divider></el-divider>
                    <!--<p class="bigfont">¥ 126,560</p>-->
                    <span class="bigfont">60%  </span>
                    <el-progress type="circle" :percentage="60" status="success" :width="95"></el-progress>
                    <el-divider></el-divider>
                    <span>转化率 60%</span>
                </el-card>
            </el-col>

        </el-row>


        <el-row>
            <el-col :span="24" style="padding: 7.5px">
                <el-card shadow="hover" class="card">
                    <span class="cardTitle">我的任务 </span>
                    <el-button
                            size="small"
                            @click="handAdd()">add my work</el-button>
                    <el-divider></el-divider>
                    <WorkTree></WorkTree>

                </el-card>

            </el-col>
        </el-row>

        <!--创建任务面板：默认隐藏-->
        <el-row>
            <el-dialog title="创建任务" :visible.sync="dialogFormVisible" align="center">
                <el-form ref="editForm" :rules="rules" :model="editForm">
                    <el-form-item label="任务内容" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="editForm.label" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addWork()" :loading="loading">{{ loading ? '创建中 ...' : '创建任务' }}</el-button>
                </div>
            </el-dialog>
        </el-row>

        <el-row>
            <el-col :span="12" class="block">
                <Rank ref="rank"></Rank>
            </el-col>
            <el-col :span="11" class="block">
                <stock ref="stock"></stock>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" class="block">
                <Trend ref="trend"></Trend>
            </el-col>
            <el-col :span="11" class="block">
                <seller ref="seller"></seller>
            </el-col>
        </el-row>
        <el-row>
            <el-row>
                <el-col :span="23" class="block" style="padding-left: 15px;">
                    <div class="top_total">
                        <span>{{nowTime}}</span>
                        <div class="msg">
                            共乘车<span class="num">{{orderCount}}</span>人次
                            ,实现盈利<span class="num">{{incomeCount}}</span>元
                            <el-button @click="getOrderAndIncomeCount()" type="text" class="el-icon-refresh btn-fullscreen"></el-button>
                            <el-button @click="openScreenPage()" type="text" class="el-icon-full-screen btn-fullscreen"></el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-row>


    </div>
</template>

<script>
    import Hot from '../components/Hot.vue'
    import Map from '../components/Map.vue'
    import Rank from '../components/Rank.vue'
    import Seller from '../components/Seller.vue'
    import Stock from '../components/Stock.vue'
    import Trend from '../components/Trend.vue'
    import WorkTree from "../components/WorkTree";
    export default {
        name: "Main",
        data(){
            return {
                nowTime: new Date(),
                orderCount:0,
                incomeCount:0,
                saleCount:[],
                payCount:[],
                forecasts:[],
                user:{
                    username:'miss',
                    //avatar:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                },
                dialogFormVisible: false,
                editForm: {
                    label: '',
                },
                rules: {
                    label: [
                        { required: true, message: '请输入任务内容', trigger: 'blur' },
                        { min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur' }
                    ],
                },
                loading:false,
            }
        },
        created(){
            //this.$store.commit("SET_USERINFO",sessionStorage.userInfo);
            if (this.$store.getters.getUserInfo){
                let userInfo=this.$store.getters.getUserInfo;
                this.user.username=userInfo.ename;
                this.user.avatar=userInfo.imageName;
                this.hasLogin=true;
            }
        },
        mounted() {
            this.startInterval();
            this.getOrderAndIncomeCount();
            //this.$store.commit('changeTheme');
            //颜色切换
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
            }
        },
        components: {
            WorkTree,
            Hot,
            Map,
            Rank,
            Seller,
            Stock,
            Trend
        },
        methods:{
            openScreenPage() {
                let routeData = this.$router.resolve({
                    path:'/screenPage',
                });
                window.open(routeData.href, '_blank');
            },
            async getOrderAndIncomeCount(){
                await this.axios.get("/chart/totalCount").then(res=>{
                    this.orderCount=res.data[0];
                    this.incomeCount=res.data[1];
                });
                await this.axios.get("/order/querySaleCount").then(res=>{
                    this.saleCount=res.data;
                });
                await this.axios.get("/order/queryPayCount").then(res=>{
                    this.payCount=res.data;
                });

                await this.axios.get("/order/forecast").then(res=>{
                    this.forecasts=res.data;
                    //alert(res.data)
                });
            },
            startInterval() {
                this.timer = setInterval(() => {
                    this.nowTime = new Date(); // 每秒修改数据date
                }, 1000);
            },
            handAdd(){
                this.dialogFormVisible=true;
            },
            addWork(){
                //新增任务

            }
        },
    }
</script>

<style scoped>
    .block{
        height: 290px;
        margin: 10px;
    }
    .top_total{
        border-radius: 20px;
        background-color: #2f3447;
        text-align: center;
        height: 100%;
        width: 100%;
        color: white;
        font-weight: bold;
    }
    .num{
        font-size: 50px;
    }
    .msg{
        position: relative;
        top: 35%;
    }
    .btn-fullscreen {
        color: white;
    }
    .bigfont{
        font-size: 30px;
    }

    .infoicon{
        float: right;
    }

    .card{
        margin: 8px 0px;
    }
    .cardTitle{
        font-weight: bold;
    }
</style>
